<template>
    <main>
        <div class="malus-hero malus-main">
            <div class="container">
                <div class="jumbotron" id="sign-up"><h1>{{$t('signup_title')}}</h1>
                    <p>{{$t('signup_desc')}}</p>
                    <div class="malus-muti-support"><span>{{$t('signup_support')}}</span>
                        <ul>
                            <li><a href="/chrome" target="_blank"><img src="../assets/ic_download_chrome.243ae.svg"
                                                                       alt="device-icon"></a></li>
                            <li><a href="/ios" target="_blank"><img src="../assets/ic_download_apple.16f50.svg"
                                                                    alt="device-icon"></a></li>
                            <li><a href="/android" target="_blank"><img src="../assets/ic_download_android.99269.svg"
                                                                        alt="device-icon"></a></li>
                            <li><a href="/windows" target="_blank"><img src="../assets/ic_download_windows.0ee69.svg"
                                                                        alt="device-icon"></a></li>
                            <li><a href="/mac" target="_blank"><img src="../assets/ic_download_mac.17741.svg"
                                                                    alt="device-icon"></a></li>
                            <li><a href="/tv" target="_blank"><img src="../assets/ic_download_androidtv.67480.svg"
                                                                   alt="device-icon"></a></li>
                        </ul>
                    </div>
                </div>
                <div id="register" class="malus-register">
                    <div class="signup-tab"><h4 class="email-tab" :class="signupStatus === 1 ? 'active' : ''"
                                                @click="signupStatus = 1">{{$t('signup_email')}}</h4><h4
                        @click="signupStatus = 2" class="phone-tab" :class="signupStatus === 2 ? 'active' : ''">
                        {{$t('signup_phone')}}</h4></div>
                    <div class="signup-group email-signup-group" v-show="signupStatus === 1"><input id="email"
                                                                                                    name="email"
                                                                                                    type="text"
                                                                                                    placeholder="请输入真实邮箱">
                        <input id="school"
                               name="school"
                               class="register-hidden"
                               type="text"
                               placeholder="请输入学校名称">
                        <div class="auth-code-group"><input id="auth-code" class="auth-code code-email" type="text"
                                                            placeholder="输入验证码">
                            <div class="btn-send-code">获取验证码</div>
                        </div>
                        <input id="email-pwd" name="password" type="password" placeholder="请输入密码（至少8位）">
<!--                        <div id="code-input" class="malus-code code-input"><label for="code">朋友的推荐码</label> <input-->
<!--                            id="code" name="code" type="text" placeholder="(非必填)"></div>-->
<!--                        <div id="code-tip" class="code-tip"><a href="#" id="code-tip-btn" class="code-tip-btn">我要填写朋友的推荐码</a>-->
<!--                        </div>-->
                        <button class="btn-signup" event="Signup Submit">{{$t('signup_submit')}}</button>
                    </div>
                    <div class="signup-group phone-signup-group" v-show="signupStatus === 2">
                        <div class="phone-code-group">
                            <div class="plus">+</div>
                            <input id="area" type="text" value="86" placeholder="区号"> <input id="phone" type="text"
                                                                                             placeholder="输入手机号"></div>
                        <div class="auth-code-group"><input id="auth-code" class="auth-code code-phone" type="text"
                                                            placeholder="输入验证码">
                            <div class="btn-send-code">获取验证码</div>
                        </div>
                        <input id="phone-pwd" name="password" type="password" placeholder="请输入密码（至少8位）">
<!--                        <div id="code-input" class="malus-code code-input"><label for="code">朋友的推荐码</label> <input-->
<!--                            id="code" name="code" type="text" placeholder="(非必填)"></div>-->
<!--                        <div id="code-tip" class="code-tip"><a href="#" id="code-tip-btn" class="code-tip-btn">我要填写朋友的推荐码</a>-->
<!--                        </div>-->
                        <button class="btn-signup" event="Signup Submit">{{$t('signup_submit')}</button>
                    </div v->
                    <div class="captcha-modal register-hidden">
                        <div class="content">
                            <div class="header">
                                <div class="title">安全验证</div>
                                <div class="btn-close-code"><i class="remixicon-close-circle-line"></i></div>
                            </div>
                            <div class="body"><img class="capcha-img"> <input id="captcha-input" type="text"
                                                                              placeholder="输入验证码">
                                <button class="captcha-btn">完成验证</button>
                            </div>
                        </div>
                    </div>
                    <div class="social-login">
                        <div class="title">使用第三方账号登录或注册</div>
                        <div class="social-btn-group">
                            <div id="google-login" class="btn-social"><img src="../assets/social-google.1d627.svg"
                                                                           alt="device-icon"> <span>Google</span></div>
                            <div id="wechat-login" class="btn-social"><img src="../assets/social-wechat.51696.svg"
                                                                           alt="device-icon"> <span>微信</span></div>
                        </div>
                    </div>
                    <div class="register-bottom">
                        <div class="agreement"><i class="ri-checkbox-circle-line"></i> <span>{{$t('signup_form_1')}} <a
                            href="./terms">{{$t('signup_form_2')}}</a> {{$t('signup_form_3')}} <a href="./privacy">{{$t('signup_form_4')}}</a></span></div>
                        <div class="malus-register-tip"><a href="/dashboard/login" event="Signin Btn">{{$t('signup_account')}}</a>
                        </div>
                    </div>
                </div>
            </div>
            <svg width="1600" height="156" viewBox="0 0 1600 156" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill="white">
                    <animate repeatCount="indefinite" fill="freeze" attributeName="d" dur="6s" values="M1600 156V73.5801C1600 73.5801 1279 -53.8561 800 26.7048C321 107.266 0 3.82945 0 3.82945V156H1600Z;
      M1600 157V80.5802C1600 80.5802 1202 105 800 27.7048C398 -49.5902 0 64.8295 0 64.8295V157H1600Z;
      M1600 180.106V53.6857C1600 53.6857 1055 180.106 683 46.0001C311 -88.1054 0 115.686 0 115.686V180.106H1600Z;
      M1600 156V73.5801C1600 73.5801 1279 -53.8561 800 26.7048C321 107.266 0 3.82945 0 3.82945V156H1600Z
      "></animate>
                </path>
            </svg>
        </div>

        <section class="malus-feature container">
            <div class="feature-list"><img src="../assets/ic_feature_heart.27ac6.svg" alt="">
                <div class="feature-list-title">{{$t('signup_li_1_title')}}</div>
                <span>{{$t('signup_li_1_desc')}}</span></div>
            <div class="feature-list"><img src="../assets/ic_feature_stable.3e1d6.svg" alt="">
                <div class="feature-list-title">{{$t('signup_li_2_title')}}</div>
                <span>{{$t('signup_li_2_desc')}}</span></div>
            <div class="feature-list"><img src="../assets/ic_feature_service.aaf64.svg" alt="">
                <div class="feature-list-title">{{$t('signup_li_3_title')}}</div>
                <span>{{$t('signup_li_3_desc')}}</span>
            </div>
        </section>

        <user-comment></user-comment>

        <Support></Support>
        <RegisterBanner></RegisterBanner>
    </main>
</template>

<script>
import UserComment from "@/components/UserComment";
import Support from "@/components/Support";
import RegisterBanner from "@/components/RegisterBanner";
export default {
    name: "Signup",
    components: {RegisterBanner, Support, UserComment},
    data() {
        return {
            signupStatus: 1
        }
    }
}
</script>

<style scoped lang="scss">
main {
    .malus-hero {
        margin-top: 68px;
        position: relative;
        display: block;
        background: url(../assets/maps_invite.585e4.svg) center 40px no-repeat, linear-gradient(
                262.85deg, #6d4cf1 1.83%, #5d45f3 99.04%);

        .jumbotron {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            background: none;

            h1 {
                font-size: 48px;
                font-weight: 400;
                margin: 56px 0 24px;
                text-align: center;
                position: relative;
                letter-spacing: 2px;
                padding: 0 24px;
            }

            p {
                max-width: 690px;
                line-height: 1.8;
                margin: 0 0 12px;
                text-align: center;
                color: #fff;
                font-size: 14px;
            }

            .malus-muti-support {
                display: flex;
                align-items: center;
                margin-bottom: 24px;

                span {
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    margin-right: 12px;
                    font-weight: 500;
                }

                ul {
                    display: flex;
                    align-items: center;
                    padding: 0;
                    list-style: none;

                    li {
                        display: block;

                        a {
                            background-color: transparent;

                            img {
                                width: 44px;
                                height: 44px;
                                margin: 0 0 0 12px;
                            }
                        }
                    }
                }
            }
        }

        .malus-register {
            position: relative;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            max-width: 534px;
            margin: 16px auto 32px;
            padding: 42px 42px 30px;
            background: #fff;
            box-shadow: 0 30px 46px rgb(0 0 0 / 8%);
            border-radius: 4px;

            .signup-tab {
                margin-bottom: 32px;
                border: 1px solid #e8e7f8;
                border-right: none;
                align-items: center;
                display: flex;

                h4 {
                    justify-content: center;
                    width: 50%;
                    height: 40px;
                    font-size: 16px;
                    color: #444;
                    border-right: 1px solid #e8e7f8;
                    cursor: pointer;
                    align-items: center;
                    display: flex;
                }

                .active {
                    box-shadow: inset 0 2px 0 #4d55e8;
                    background: #fafaff;
                    color: #333;
                }
            }
        }

        .malus-register::before {
            width: 177px;
            height: 390px;
            background: url(../assets/socail_left.fdce6.png) no-repeat;
            background-size: contain;
            left: -230px;
            top: -210px;
            content: "";
            display: block;
            position: absolute;
        }

        .malus-register::after {
            width: 218px;
            height: 435px;
            background: url(../assets/socail_right.48a34.png) no-repeat;
            background-size: contain;
            right: -270px;
            top: -198px;
            content: "";
            display: block;
            position: absolute;
        }

        input {
            width: 100%;
            font-size: 13px;
            line-height: 16px;
            margin-bottom: 16px;
            padding: 12px 18px;
            background: #fff;
            border-radius: 4px;
            -webkit-appearance: none;
            border: 1px solid #e8e8e8;
        }

        .auth-code-group {
            display: flex;
            align-items: center;
            position: relative;

            .btn-send-code {
                position: absolute;
                right: 0;
                top: 1px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 120px;
                font-size: 13px;
                font-weight: 500;
                color: #4d55e8;
                cursor: pointer;
                border-left: 1px solid #e8e7f8;
            }
        }

        .malus-code {
            position: relative;
            display: none;

            label {
                position: absolute;
                font-size: 13px;
                top: 14px;
                left: 20px;
                color: #7b7b7b;
            }
        }

        .code-tip {
            opacity: .6;
            font-size: 12px;
            text-align: center;

            a {
                display: block;
                margin: 6px 0;
                background-color: transparent;
            }
        }

        .btn-signup {
            width: 100%;
            cursor: pointer;
            margin-top: 14px;
            font-size: 16px;
            line-height: 20px;
            padding: 12px 0;
            text-align: center;
            background: #4d55e8;
            color: #fff;
            border-radius: 4px;
            border: none;
        }

        .social-login {
            .title {
                margin-top: 24px;
                display: block;
                color: #7b7b7b;
                position: relative;
                font-size: 12px;
                text-align: center;
            }

            .title::before {
                left: 0;
                display: block;
                width: 120px;
                height: 1px;
                background: #e8e8e8;
                position: absolute;
                top: 6px;
                content: "";
            }

            .title::after {
                right: 0;
                display: block;
                width: 120px;
                height: 1px;
                background: #e8e8e8;
                position: absolute;
                top: 6px;
                content: "";
            }
        }

        .social-btn-group {
            margin-top: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .btn-social {
                width: 47.5%;
                height: 34px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #e8e8e8;
                border-radius: 4px;
                cursor: pointer;

                img {
                    width: 20px;
                    height: 20px;
                    margin: 0 6px 0 0;
                }

                span {
                    font-size: 13px;
                    color: #333;
                }
            }
        }

        .register-bottom {
            margin-top: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;

            .agreement {
                display: flex;
                align-items: center;
                font-size: 12px;
                color: #7b7b7b;
                transform: scale(.85);
                margin-left: -26px;

                i {
                    margin-right: 4px;
                    color: #07bb07;
                }

                span {
                    a {
                        color: #4d55e8;
                    }
                }
            }

            .malus-register-tip {
                text-align: center;
                font-size: 14px;
                cursor: pointer;

                a {
                    display: block;
                    color: #7b7b7b;
                    margin: 6px 0;
                    font-size: 12px;
                }
            }
        }

        .signup-group {
            .phone-code-group {
                display: flex;
                position: relative;

                .plus {
                    height: 42px;
                    position: absolute;
                    top: -1px;
                    left: 0;
                    display: flex;
                    align-items: center;
                    padding-left: 8px;
                    z-index: 1111;
                    color: #333;
                }

                #area {
                    width: 72px;
                    border-radius: 4px 0 0 4px;
                    border-right: none;
                }

                #phone {
                    border-radius: 0 4px 4px 0;
                }
            }
        }

        .captcha-modal {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .7);
            padding: 100px;
            z-index: 9999;
        }

        .register-hidden {
            display: none !important;
        }
    }

    .malus-feature {
        padding-top: 80px;
        display: flex;
        justify-content: space-between;
        background: url(../assets/feature_bg.6829b.svg) 30px -40px no-repeat;
        background-size: 1326px 412px;
        .feature-list {
            display: flex;
            width: 306px;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            text-align: center;
            img {
                display: inline-block;
                width: 56px;
                height: 56px;
            }
            .feature-list-title {
                font-size: 18px;
                color: #333;
                font-weight: 500;
                padding: 0 20px;
                margin: 24px 0;
            }
            span {
                padding: 0 20px 30px;
                font-size: 14px;
                line-height: 1.8;
                color: #7b7b7b;
                font-weight: 400;
            }
        }
    }
}
</style>
